<template>
    <div class="raterItem">
      <div class="top">
        <div class="title">{{ raterSort }}.{{ raterTitle }}</div>
        <div class="rate" v-if="rateShow">{{ rateNum }}分</div>
      </div>
      <div class="bottom">
        <div class="left">低</div>
        <ul class="middle">
          <li v-for="index of scoreList" :key="index" @click="(e) => handleClick(e, index)" v-bind:class="{ active:index==current}"></li>
        </ul>
        <div class="right">高</div> 
      </div>
    </div>
</template>

<script>
  export default {
    name: 'rater',
    props: {
      raterTitle: String,
      raterSort: Number,
      isRateShow: Boolean,
      raterCurrent: Number
    },
    mounted() {
      this.rateShow = this.isRateShow;
      // this.current = this.raterCurrent;
			// console.log('current', this.current)
      this.sendObj.No = this.raterSort;
    },
    data() {
      return {
        rateNum: 0,
        rateShow: false,
        current: null,
        sendObj: {},
				scoreList: [-5, -3, 0, 3, 5],
      }
    },
    methods: {
      handleClick(e, num) {
        this.rateNum = num;
        this.current = num;
        if (!this.rateShow) this.rateShow = true;
        this.sendObj.sort = num;
        this.$emit('sort', this.sendObj);
      }
    }
  }
</script>

<style lang="less" scoped>
  .raterItem {
    width: 100%;
    background: #fff;
    padding: 0.3rem 0.3rem 0.2rem;
    .top {
      display: flex;
      justify-content: space-between;
      font-size: 0.3rem;
      font-weight: bold;
      margin-bottom: 0.32rem;
      .title {
        color: #222;
      }
      .rate {
        color: #BBB;
      }
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      font-size: 0.24rem;
      font-weight: bold;
      .left { color: #BBB; }
      .right { color: #6CBF20; }
      .middle {
        list-style: none;
        padding-left: 0;
        display: flex;
        justify-content: space-between;
        li {
          width: 1.1rem;
          height: 0.36rem;
          margin-right: 0.1rem;
        }
        li:first-child {
          background:rgba(203,201,203,0.2);
          border-radius:100px 0px 0px 100px;
        }
        li:nth-child(2) { background:rgba(203,201,203,0.4); }
        li:nth-child(3) { background:rgba(203,201,203,0.6); }
        li:nth-child(4) { background:rgba(203,201,203,0.8); }
        li:last-child {
          background:rgba(203,201,203,1);
          border-radius:0px 100px 100px 0px;
          margin-right: 0;
        }
        li.active {
          background: #6CBF20;
          box-shadow:0px 4px 20px 0px rgba(108,191,32,0.5);
        }
      }
    }
  }
</style>

